<template>
  <div>
      <div class="routerView">
          <router-view />
      </div>
     <tabbar v-model="tabbarModel" v-if="supportOA">
      <tabbar-item v-for="(item,index) in tabbarData" :key="index" :badge="`${item.badgeNum || ''}`" :link="item.linkUrl">
        <img slot="icon" :src="require(`../assets/icon${index}.svg`)">
        <img slot="icon-active" :src="require(`../assets/iconActive${index}.svg`)">
        <span slot="label">{{item.label}}</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import setting from "@/setting";

export default {
  name: 'App',
  data(){
	  return {
	  supportOA : setting.supportOA,
      tabbarModel:0,
      tabbarData:[
        {label:'主页',linkUrl:'/home'},
        {label:'新闻',linkUrl:'/news',badgeNum:0},
        {label:'公告',linkUrl:'/notice',badgeNum:0},
      ]

	  }
  },
  created(){
    this.setTabbarModel();
    this.getNoReadCount();
  },
  methods:{
    setTabbarModel(){
      let pathArr = [{id:0,name:'/home'},{id:1,name:'/news'},{id:2,name:'/notice'}];
      let _fifler = pathArr.filter(({name}) => this.$route.path.indexOf(name)>-1);
      let _index =  _fifler.length?_fifler[0].id:0;
      this.tabbarModel = _index;
    },
    getNoReadCount(){
      var defer = this.baseService.postForm(
        this.__ctx + "/oa/oANotify/queryNoReadCount",
        {}
      );
      defer.then(data => {
        this.tabbarData[2].badgeNum=data.data
      });
    },
  },
}
</script>

<style scoped lang="less">
.routerView{
  margin-bottom: 53px;
}
</style>
